---
layout: example.html
title: WebGL points layer
shortdesc: Using a WebGL-optimized layer to render a large quantities of points
docs: >
  <p>
    This example shows how to use a `WebGLPointsLayer` to show a large amount of points on the map.
    The layer is given a style in JSON format which allows a certain level of customization of the final representation.
  </p>

  <p>
    Consult the <a href="/en/latest/apidoc/module-ol_expr_expression.html#~ExpressionValue">documentation on expressions</a> to know which operators to use and how.
  </p>

tags: "webgl, point, layer, feature"
experimental: true
---

<div id="map" class="map"></div>
Choose a predefined style from the list below or edit it as JSON manually.
<select id="style-select">
  <option value="icons">Icons</option>
  <option value="triangles">Triangles, color related to population</option>
  <option value="triangles-latitude">Triangles, color related to latitude</option>
  <option value="circles">Circles, size related to population</option>
  <option value="circles-zoom">Circles, size related to zoom</option>
  <option value="rotating-bars">Rotating bars</option>
</select>
<textarea style="width: 100%; height: 20rem; font-family: monospace; font-size: small;" id="style-editor"></textarea>
<small>
  <span id="style-valid" style="display: none; color: forestgreen">✓ style is valid</span>
  <span id="style-invalid" style="display: none; color: grey">✗ <span>style not yet valid...</span></span>
  &nbsp;
</small>
